<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="450"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Define drawing parameters
  const origin = { x: 80, y: 225 };
  const D = 320;
  const y = 80;
  const screenX = origin.x + D;
  const pointY = origin.y - y;

  // --- Style setup ---
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 2.5;

  // --- Helper function to draw an arrow ---
  function drawArrow(ctx, fromX, fromY, toX, toY, headLength) {
    const dx = toX - fromX;
    const dy = toY - fromY;
    const angle = Math.atan2(dy, dx);
    ctx.beginPath();
    ctx.moveTo(fromX, fromY);
    ctx.lineTo(toX, toY);
    ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(toX, toY);
    ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
  }

  // --- Draw Y-axis ---
  drawArrow(ctx, origin.x, origin.y + 100, origin.x, origin.y - 150, 10);
  ctx.font = 'italic 24px serif';
  ctx.fillText('y', origin.x - 25, origin.y - 155);

  // --- Draw X-axis ---
  drawArrow(ctx, origin.x - 20, origin.y, origin.x + D + 50, origin.y, 10);
  ctx.fillText('x', origin.x + D + 60, origin.y + 5);

  // --- Draw the Screen ---
  ctx.beginPath();
  ctx.moveTo(screenX, origin.y - 170);
  ctx.lineTo(screenX, origin.y + 120);
  ctx.stroke();

  // --- Draw the source point and label ---
  ctx.font = '24px serif';
  ctx.fillText('S', origin.x - 25, origin.y + 5);

  // --- Draw the path r ---
  ctx.beginPath();
  ctx.moveTo(origin.x, origin.y);
  ctx.lineTo(screenX, pointY);
  ctx.stroke();
  ctx.font = 'italic 24px serif';
  ctx.fillText('r', origin.x + D/2 - 20, origin.y - y/2 - 5);


  // --- Draw and label distance D ---
  const d_yPos = origin.y + 60;
  ctx.beginPath();
  ctx.moveTo(origin.x, d_yPos);
  ctx.lineTo(screenX, d_yPos);
  // Ticks for D
  ctx.moveTo(origin.x, d_yPos - 5);
  ctx.lineTo(origin.x, d_yPos + 5);
  ctx.moveTo(screenX, d_yPos - 5);
  ctx.lineTo(screenX, d_yPos + 5);
  ctx.stroke();
  ctx.font = 'italic 24px serif';
  ctx.textAlign = 'center';
  ctx.fillText('D', origin.x + D / 2, d_yPos + 25);


  // --- Draw and label distance y ---
  const y_xPos = screenX + 30;
  ctx.beginPath();
  ctx.moveTo(y_xPos, origin.y);
  ctx.lineTo(y_xPos, pointY);
  // Ticks for y
  ctx.moveTo(y_xPos - 5, origin.y);
  ctx.lineTo(y_xPos + 5, origin.y);
  ctx.moveTo(y_xPos - 5, pointY);
  ctx.lineTo(y_xPos + 5, pointY);
  ctx.stroke();
  ctx.textAlign = 'left';
  ctx.fillText('y', y_xPos + 10, origin.y - y / 2);

  
  // --- Add text annotations ---
  ctx.textAlign = 'center';
  ctx.font = 'italic 24px serif';
  ctx.fillText('D >> \u03BB', origin.x + D / 2, origin.y - 110);
  ctx.fillText('D >> y', origin.x + D / 2, origin.y - 80);


  // --- Figure Caption ---
  ctx.font = 'bold 20px serif';
  ctx.textAlign = 'center';
  ctx.fillText('Fig. 2.1', origin.x + D/2, origin.y + 120);

</script>
</body>
</html>